
import * as echarts from '../../../../ec-canvas/echarts';
import { getComacGague } from '../../../../api/getData.js'
import { formatTime, timeFormat } from '../../../../utils/util.js'
const systemInfo = wx.getSystemInfoSync();
const App = getApp();
let getBatChart;
Component({
  data: {
    ec: {
      lazyLoad: true
    },
    healthData: {
      type: Object
    },
    startTime: '',
    practicalTime: '',
    oldHealth: '',
    oldDeviceName: '',
    username: '',
    moduleID: '',
    type: '1',
    checked: 'true',
    themeColor: '#FF5C5C',
    axisLineColor: [[0.5, '#8E939E'], [0.75, '#8E939E'], [1, '#8E939E']],
    isCompalte: false
  },
  ready() {
  },
  pageLifetimes: {
    show() {
      getBatChart = null
    },
  },
  methods: {
    initEchartObj(){
      getBatChart = null
    },
    radioChange(e) {
      const { value } = e.detail;
      this.setData({
        type: value,
        checked: !this.data.checked,
        oldHealth: '',
        oldDeviceName: ''
      });
    },
    countEcharts(data) {
      // 这里多加了判断 之前的判断会造成当两个不同设备有相同的健康值的时候会造成不刷新的现象
      if ((this.data.oldDeviceName === data.result.deviceName) && (this.data.oldHealth === data.result.trendHealth || this.data.oldHealth === data.result.health)) return
      if (this.data.isCompalte) return
      this.setData({
        isCompalte: true
      })
      this.data.oldHealth = data.result.trendHealth || data.result.health;
      this.data.oldDeviceName = data.result.deviceName;
      this.setData({
        healthData: data.result,
        username: wx.getStorageSync('username'),
        moduleID: wx.getStorageSync('moduleList_new')[0] ? wx.getStorageSync('moduleList_new')[0].moduleID : wx.getStorageSync('moduleList')[0].moduleID
      })
      this.getGaugeOption();
    },

    // 配置bar
    getGaugeOption() {
      const { type, healthData, moduleID } = this.data;
      if (moduleID === "health") {
        let newData = healthData.health;
        let lableName = healthData.condition;
        this.getThemeColor(type, newData);
        this.getBar(lableName, newData);
      } else if (moduleID === "health_comac"){
        let newData = healthData.trendHealth;
        let lableName = healthData.trendCondition;
        this.getThemeColor(type, newData);
        this.getBar(lableName, newData);
      } else if (moduleID === "health_tobaccoxiamen") {
        let newData = type === '1' ? healthData.trendHealth : healthData.stableHealth;
        let lableName = type === '1' ? healthData.trendCondition : healthData.stableCondition;
        this.getThemeColor(type, newData);
        this.getBar(lableName, newData);
      } else if (moduleID === "health_motor") {
        let newData = healthData.health;
        let lableName = healthData.condition;
        this.getThemeColor(type, newData);
        this.getBar(lableName, newData);
      } else if (moduleID === "healthComacLathe") {
        getComacGague(healthData.deviceID).then(res => {
          console.log(res)
          if (res.resCode === "SUCCESS") {
            this.setData({
              healthData: res.result
            })
            let newData = this.data.healthData.score;
            let lableName = '完成度';
            this.getThemeColor(type, newData);
            this.getBar(lableName, newData);
            let startTime = new Date(this.data.healthData.processStart);
            let practicalTime = new Date(this.data.healthData.processEnd - this.data.healthData.processStart)
            this.setData({
              startTime: formatTime(startTime),
              practicalTime: timeFormat(practicalTime)
            })
          }
        })
      }
    },
    initgetBar(canvas, width, height){
      getBatChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      getBatChart.on('finished',param => {
        this.setData({
          isCompalte: false
        })
      })
    },

    getBar(lableName, newData) {
      let mychart = this.selectComponent("#mychart-dom-gauge");
      mychart.init((canvas, width, height) => {
        if (!getBatChart){
          this.initgetBar(canvas, width, height)
        }
        getBatChart.setOption({
          series: [
            // 灰色底盘
            {
              type: "pie",
              data: [0],
              radius: [0, '65%'],
              animation: false,
              color: "#6B6E7B",
              emphasis: {
                itemStyle: {
                  color: "#6B6E7B"
                }
              },
              labelLine: {
                show: false
              },
              z: 1
            },
            {
              type: 'gauge',                   
              data: [newData],
              splitNumber: 5,
              startAngle: 240,
              endAngle: -60,
              radius: '82%',
              axisLine: {
                lineStyle: {
                  width: 8,
                  color: this.data.axisLineColor
                }
              },
              axisLabel: {
                distance: -55,
                textStyle: {
                  fontSize: '14',
                },
                rich: {}
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                width: 50,
                length: '73%'
              },
              itemStyle: {
                color: this.data.themeColor,
              },
              detail: {
                show: false
              }
            },
            // 遮挡一半指针的小圆
            {
              name: lableName,
              label: {
                position: "center",
                formatter: '{c|{c}}\n{a|{a}}',
                rich: {
                  c: {
                    color: this.data.themeColor,
                    fontSize: 48,
                    fontWeight: "bold"
                  },
                  a: {
                    color: this.data.themeColor,
                    fontSize: 24
                  }
                }
              },
              type: "pie",
              data: [newData],
              radius: [0, '51.8%'],
              animation: false,
              color: "#6B6E7B",
              emphasis: {
                itemStyle: {
                  color: "#6B6E7B"
                }
              },
              z: 2
            }
          ]
        })
      })
    },

    getThemeColor(type, param) {
      let status = '';
      if (param >= 0 && param < 50) { status = 1; this.setData({ axisLineColor: [[0.5, '#FF5C5C'], [0.75, '#8E939E'], [1, '#8E939E']] }) }
      else if (param >= 50 && param < 75) { status = 2; this.setData({ axisLineColor: [[0.5, '#8E939E'], [0.75, '#FFC36D'], [1, '#8E939E']] }) }
      else if (param >= 75 && param <= 100) { status = 3; this.setData({ axisLineColor: [[0.5, '#8E939E'], [0.75, '#8E939E'], [1, '#5CFFF0']] }) }
      else { status = 1; this.setData({ axisLineColor: [[0.5, '#8E939E'], [0.75, '#8E939E'], [1, '#8E939E']] }) }
      const actions = new Map([
        [{ type: 1, status: 1 }, () => { this.setData({ themeColor: '#FF5C5C' }) }],
        [{ type: 1, status: 2 }, () => { this.setData({ themeColor: '#FFC36D' }) }],
        [{ type: 1, status: 3 }, () => { this.setData({ themeColor: '#5CFFF0' }) }],
        [{ type: 2, status: 1 }, () => { this.setData({ themeColor: '#FF5C5C' }) }],
        [{ type: 2, status: 2 }, () => { this.setData({ themeColor: '#FFC36D' }) }],
        [{ type: 2, status: 3 }, () => { this.setData({ themeColor: '#5CFFF0' }) }],
      ]);
      let action = [...actions].filter(([key, value]) => (key.type == type && key.status == status))
      action.forEach(([key, value]) => value.call(this))
    }
  }
})